<template>
	<view class="index">
		<view class="index-top">
			<view class="index-user">
				<image src="../../static/logo.png"></image>
				<view class="user-info">
					<span>
						{{uname}}
					</span>
					<span>
						id：{{uid}}
					</span>
					<span>
						身份：{{ustatus}}
					</span>
					<span>
						{{uarea}}
					</span>
				</view>
			</view>
		</view>
		<view class="index-list">
			<uni-list v-for="(item,index) in data">
				<uni-list-item clickable to="" :title="item" direction="column" showArrow></uni-list-item>
			</uni-list>
		</view>
		<view class="btnlog">
			<button class="buttonlogin" hover-class="bg-click" @click="goto()">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				data: [
					"用户信息",
					"修改密码",
					"版本更新",
					"意见反馈"
				],
				uname: "武笑笑",
				uid: "11",
				ustatus: "调度侧",
				uarea: "南京市电厂101"
			}
		},
		computed: {
			...mapState(['isLogin,userInfo,id,role']),
		},
		onShow() {
			console.log(this.$store.state.userInfo.name);
			console.log(this.$store.state.userInfo.account);
			console.log(this.$store.state.userInfo.area);
			console.log(this.$store.state.userInfo.role);
			this.uname = this.$store.state.userInfo.name;
			this.uid = this.$store.state.userInfo.account;
			this.uarea = this.$store.state.userInfo.area;
			if (this.$store.state.userInfo.role == 1) {
				this.ustatus = '现场侧';
			} else if (this.$store.state.userInfo.role == 2) {
				this.ustatus = '调度侧';
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['logout']),
			goto() {
				uni.request({
					url: this.$api + '/myusers/exit',
					method: 'GET', // 请求方法
					// dataType: 'text',
					success: (res) => {
						console.log(res);
						console.log(res.statusCode);
						console.log(res.data);
						console.log(res.data.state);

						if (res.data.state == 200) {
							this.logout();
							uni.switchTab({
								url: '/pages/me/mynolog'
							})
							uni.setTabBarItem({
								index: 1,
								visible: false
							})
							uni.setTabBarItem({
								index: 2,
								visible: false
							})
							uni.setTabBarItem({
								index: 3,
								visible: true
							})
							uni.setTabBarItem({
								index: 4,
								visible: false
							})
							console.log("success");
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				})


			}
		}
	}
</script>

<style>
	.index-user {
		/* background: #3f51b5; */
		background: linear-gradient(to left, #006f6b, #5dc8b1);
		text-align: center;
		display: flex;
		align-items: center;
	}

	.index-user image {
		margin: 100rpx;
		margin-left: 20px;
		width: 200rpx;
		height: 200rpx;
		border: 3px solid white;
		border-radius: 100rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.user-info span {
		align-self: flex-start;
		color: #ffffff;
	}

	.buttonlogin {
		width: 500rpx;
		height: 80rpx;
		display: flex;
		line-height: 50rpx;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 25px;
		background-color: #ff0000;
		font-size: 40rpx;
		margin-top: 150rpx;
		margin-bottom: 100rpx;
	}

	.bg-click {
		background-color: #e0f8ff;
		color: black;
	}
</style>
